<template>
  <el-select
    class="main-select-tree"
    ref="selectTree"
    v-model="val"
    style="width: 100%"
    v-on="$listeners"
    v-bind="$attrs"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      style="display: none"
    />
    <el-tree
      class="main-select-el-tree"
      ref="selecteltree"
      :data="treeData"
      :node-key="props.key"
      highlight-current
      :props="props"
      @check="checkNodeClick"
      @node-click="handleNodeClick"
      :current-node-key="props.key"
      :expand-on-click-node="expandOnClickNode"
      v-bind="$attrs"
      v-on="$listeners"
    />
  </el-select>
</template>

<script>
export default {
  name: 'MsuiSelectTree',
  props: {
    value: {
      type: Array | String | Number,
      default: () => {
        return ''
      }
    },
    attrs: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      expandOnClickNode: true,
      options: [],
      treeData: [],
      val: ''
    }
  },
  computed: {
    props() {
      if (this.attrs.props) {
        return this.attrs.props
      } else {
        return {
          children: 'children',
          label: 'label',
          key: 'id'
        }
      }
    }
  },
  watch: {
    val() {
      this.$emit('input', this.val)
    },
    value: {
      handler() {
        this.val = this.value
        if (this.val && this.val instanceof Array && this.val.length > 0) {
          this.$refs.selecteltree.setCheckedKeys(this.val)
        }
      },
      deep: true,
      immediate: true
    },
    'attrs.options': {
      handler() {
        if (this.attrs.options instanceof Promise) {
          this.attrs.options.then((res) => {
            this.options = this.formatData(res)
            this.treeData = res
          })
        } else {
          this.options = this.formatData(this.attrs.options)
          this.treeData = this.attrs.options
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    formatData(data) {
      let options = []
      let flat = (data) => {
        data.forEach((item) => {
          if (item[this.props.children] && item[this.props.children].length > 0) {
            options.push({
              label: item[this.props.label],
              value: item[this.props.key]
            })
            flat(item[this.props.children])
          } else {
            options.push({
              label: item[this.props.label],
              value: item[this.props.key]
            })
          }
        })
      }
      flat(data)
      return options
    },
    checkNodeClick(node) {
      this.$emit('input', node[this.props.key])
      if (this.$listeners.change) {
        this.$listeners.change(node)
      }
    },
    handleNodeClick(node) {
      if (this.$attrs.showCheckbox) {
        return
      }
      this.$emit('input', node[this.props.key])
      if (this.$listeners.change) {
        this.$listeners.change(node)
      }
      this.$refs.selectTree.blur()
    }
  }
}
</script>

<style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: var(--background-primary);
}

.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: var(--background-primary);
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: var(--border-primary);
}
</style>
